<template>
    <div id="multi-l-p-echart" :style="{ width: '1000px', height: '600px' }"></div>
</template>

<script>
import { onMounted, ref , watch , reactive} from "vue";
import * as echarts from 'echarts'

import { builtMultiLineEchartOption } from '../myechart/multiLineEchart'
import { getMultiMonthData } from '../service/month';

import { useRoute } from 'vue-router'
import { getMultiDefaultStocks } from '../utils/help';

export
default {
    setup() {

        let myChart = null
        const initEchart = () => {
            myChart = echarts.init(document.getElementById('multi-l-p-echart'))
            window.onresize = function () {//自适应大小
                myChart.resize();
            };
        }

        let stocks = getMultiDefaultStocks()
        const {query: query} = useRoute()
        if (query.stocks) {
            stocks = query.stocks
        }

        const loadEchart = () => {
            getMultiMonthData(stocks).then(res => {
                let option = builtMultiLineEchartOption(res.data)
                myChart.setOption(option)
            })
        }

        onMounted(()=> {
            initEchart()

            loadEchart()
        })
    }
}
</script>